<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-button size="small" type="primary" :icon="CirclePlus" @click="onInsert">添加</el-button>
                <el-popconfirm title="确定要删除么?" @confirm="onSelectDelete">
                    <template #reference>
                        <el-button size="small" type="danger" :icon="Delete">删除</el-button>
                    </template>
                </el-popconfirm>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-button size="small" type="primary" class="ml10" :icon="RefreshRight" @click="onSearch('Refresh')" />
            </el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" show-overflow-tooltip />
            <el-table-column prop="mobile" label="手机号码" show-overflow-tooltip />
            <el-table-column prop="department" label="部门" show-overflow-tooltip />
            <el-table-column prop="created_at" label="创建时间" width="180" />
            <el-table-column fixed="right" label="操作" min-width="100">
                <template #header>
                    <el-input v-model="form.search" size="small" :icon="Search" placeholder="请输入姓名/手机号" @input="onSearch" clearable />
                </template>
                <template #default="scope">
                    <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-button link type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isUserForm" title="新增人员" width="40%">
        <component :is="UserForm" :data=projectInfo @saveUser="saveUser" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted, watch } from 'vue'
import { CirclePlus, Search, Delete,RefreshRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import UserForm from './userForm.vue';
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false})
interface Project {
    id: number
    name: string
    mobile:string
    department: string
    created_at: string
}
const tableData = ref<Project[]>([])
const tableDataSearch = ref<Project[]>([])
const multipleSelection = ref<Project[]>([])

const isUserForm = ref<boolean>(false)
const projectInfo = ref<Project>()
const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    projectInfo.value = props.data
},{ immediate: true })

const onGetData = () => {
    console.log('请求')
    form.value.page = 0;
    form.value.loading = true
    tableData.value = [
        {id:1,name:'学习型',mobile:'13711223341',department:'11',created_at:'2011-10-12 12:12:50'},
        {id:2,name:'Aaa',mobile:'13711223342',department:'22',created_at:'2011-11-18'},
        {id:3,name:'啊啊啊',mobile:'13711223343',department:'33',created_at:'2011-10-12'},
        {id:4,name:'项目嗷嗷',mobile:'13711223344',department:'44',created_at:'2011-09-12'},
    ]
    tableDataSearch.value = tableData.value
    form.value.loading = false
    // form.value.loading = true
    // http.post('/project',form.value).then((response:any)=>{
    //     form.value.loading = false
    //     tableData.value = response.data.data
    //     form.value.total = response.data.total
    // })
}

const onSearch = (type:string = '') => {
    if(type == 'Refresh'){
        form.value.search = ''
        onGetData()
        return
    }
    let arr:Project[] = []

    tableDataSearch.value.forEach((e:Project) => {
        if(e.name.indexOf(form.value.search) != -1 || e.mobile.indexOf(form.value.search) != -1){
            arr.push(e)
        }
    });
    tableData.value = arr
}

const handleSelectionChange = (val: Project[]) => {
    multipleSelection.value = val
}

const onInsert = () => {
    isUserForm.value = true
}

const onSelectDelete = () => {
    if(!multipleSelection.value.length){
        ElMessage.error('请选择要删除的人员');
        return
    }
    let arrId:number[] = []
    multipleSelection.value.forEach((e:Project) => {
        arrId.push(e.id)
    });
    ElMessage.success(arrId+'删除操作');
}

const onDelete = (id: number) => {
    ElMessage.success(id+'删除操作');
    // http.delete('/project/'+id).then((response:any)=>{
    //     if(response.data.code != 200){
    //         ElMessage.error(response.data.msg);return;
    //     }
    //     ElMessage.success(response.data.msg);
    //     onGetData();
    // })
}

const saveUser = () => {
    isUserForm.value = false
    onGetData()
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>